<template>
  <div class="wrapper">
    <div class="login-wrap">
      <!-- 粒子背景效果 -->
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="14"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="200"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="wrap_particles"
      ></vue-particles>

      <!-- 登陆窗口 -->
      <div class="login_module">
        <img class="loginM_bg" src="../../assets/images/login.png" alt>
        <div class="login_box">
          <div class="login_tit">商家后台管理系统</div>
          <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            label-width
            class="login_form"
          >
            <div class="login_form_item form_item_username">
              <label for="username">账号</label>
              <input type="text" autocomplete="off" v-model="form.username">
            </div>
            <div class="login_form_item">
              <label for="password">密码</label>
              <input type="password" autocomplete="off" v-model="form.password">
            </div>
            <div class="pass_operate">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="记住密码" name="type"></el-checkbox>
              </el-checkbox-group>
              <router-link class="pass_forget" to="/getCode">
                <span>忘记密码</span>
                <img src="../../assets/images/arrow_r.png" alt>
              </router-link>
            </div>
            <el-form-item class="form_submit">
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
            <router-link class="form_mark" to="/getCode">初次登录，请点此创建密码</router-link>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      // this.$router.push({ path: '/index' });
      api
        .sendCodeSms('?mobile=15072329516&codeSize=6&smsType=SMS_USER_REGISTER', {}, {
          'Content-Type': 'application/x-www-form-urlencoded'
        })
        .then(res => {
          
        })
        .catch(err => {
          
        });

        // api
        // .findUser({
        //   params: {
        //     mobile: '15072329516'
        //   }
        // })
        // .then(res => {
          
        // })
        // .catch(err => {
          
        // });
        // api.login('?userName='+this.ruleForm.username+'&password='+this.$md5(this.ruleForm.password))
        // .then(res => {
            
        // })
        // .catch(err => {
            
        // });
    }
  }
};
</script>

<style scoped lang="scss">
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background: #2A314F;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  .wrap_particles {
    background: linear-gradient(to bottom, #3E68D4, #2A314F);
  }
}
.login_module {
  width: 990px;
  height: 540px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -270px 0 0 -495px;
  .loginM_bg {
    width: 100%;
    height: 100%;
  }
  .login_box {
    width: 450px;
    padding: 50px 56px 0 56px;
    box-sizing: border-box;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    .login_tit {
      color: #3881F8;
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 50px;
    }
    .login_form {
      .login_form_item {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        vertical-align: text-bottom;
        padding: 14px 0;
        color: #A7A7A7;
        font-size: 20px;
        border-bottom: 1px solid #E6E3E3;
        label {
          margin-right: 10px;
          display: inline-block;
        }
        input {
          background: none !important;
          border: 0 !important;
          color: #A7A7A7 !important;
          font-size: 18px;
        }
      }
      .form_item_username {
        margin-bottom: 30px;
      }
      .pass_operate {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 14px 0 40px 0;
        color: #999999;
        .pass_forget {
          cursor: pointer;
          span {
            color: #999999;
          }
          img {
            height: 12px;
            width: 12px;
            margin-left: 6px;
          }
        }
      }
      .form_submit {
        width: 100%;
        height: 52px;
        margin-bottom: 16px !important;
        button {
          width: 100%;
          height: 52px;
          border-radius: 50px;
          box-shadow: 0 5px 12px rgba(56, 130, 248, 0.616);
          font-size: 20px;
        }
      }
      .form_mark {
        display: block;
        text-align: center;
        font-size: 16px;
        color: #666666;
      }
    }
  }
}
</style>
